<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>回调地狱</title>
    <!-- 通过Ajax请求id，再根据id请求用户名 -->
    <script src="./jquery.js"></script>
</head>



<body>
    <script>
        // 发送Ajax请求
        $.ajax({
            type: 'GET',
            url: './data1.json',
            // res-->response/result
            success: function (res) {
                // 对象的解构赋值，从res里面提取到id这个属性
                const { id } = res
                console.log(id)

                // 发送ajax请求,获取username
                $.ajax({
                    type: 'GET',
                    url: './data2.json',
                    data: { id },//相当于id:id,es6
                    success: function (res) {
                        const { userName } = res
                        console.log(userName)

                        //  发送ajax请求, 再根据username获取e-mail
                        $.ajax({
                            type: 'GET',
                            url: './data3.json',
                            data: { userName },
                            success: function (res) {
                                const { e_mail } = res
                                console.log(e_mail)
                            }
                        })
                    }
                })
            }
        })

    </script>
</body>

</html>